<template>
  <div >
    <div id="printTest" style="height:450px;font-size:5px">
      <div style="display:flex;justify-content: center;align-items: center;height:36px">
        <h1 style="text-align:center;color:#000;width:50%;font-size: 5em;">仓库</h1>
      </div>
      <div style="display:flex;justify-content: center;align-items: center;height:36px">
        <h1 style="text-align:center;color:#000;width:50%;font-size: 5em;">领用单</h1>
      </div>
      <div class="tittle" style="margin-bottom:-5px;display: flex;justify-content: center;align-items: center;">
        <p style="width: 49%;display: flex;align-items: center;">仓库：{{form.warehouseName}}</p>
        <p style="width: 49%;display: flex;align-items: center;">领用单号：{{form.code}}</p>
      </div>
      <div class="tittle" style="margin-bottom:-5px;display: flex;justify-content: center;align-items: center;">
        <p style="width: 49%;display: flex;align-items: center;">类型：{{form.typeName}}</p>
        <p style="width: 49%;display: flex;align-items: center;">订单日期：{{form.gmtCreated}}</p>
      </div>
      <div class="tittle" style="margin-bottom:-5px;display: flex;justify-content: center;align-items: center;">
        <p style="width: 49%;display: flex;align-items: center;">备注：{{form.remarks}}</p>
        <p style="width: 49%;display: flex;align-items: center;">打印日期：{{printDate}}</p>
      </div>

      <div style="width: 100%;border:1px solid #000000;margin: 0 auto;min-height:60px;">
        <div style="display: flex;justify-content: center;align-items: center;height:30px;border-bottom: 1px solid #000000;">
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">序号</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">商品名称</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">商品编码</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">商品条码</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">单位</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">领用数量</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">备注</div>
        </div>
        <div style="display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #000000;height:30px;" v-for="(item,index) in tableData" :key="item.id">
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{index + 1}}</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.goodsName}}</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.productCode}}</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.goodsBarCode}}</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.unitName}}</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.collectQuantity}}</div>
          <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.remarks}}</div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="funcCancel">取 消</el-button>
      <el-button type="primary" v-print="'#printTest'">打 印</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  import {collectDetail} from '@/api/store'

  Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })

  export default {
    data() {
      return {
        form:{
          warehouseName: '',
          code: '',
          typeName:'',
          gmtCreated: '',
          remarks: ''
        },
        printDate:'',
        inboundQuantityTotal:0,
        partys:[],
        tableData:[],
        warehouseData: [],
        typeList: [
          { code: "0", name: "仓库领用" },
          { code: "1",name: "财务领用" }
        ],
      }
    },
    created(){

    },
    methods:{
      // 获取页面信息
      getInfo(code) {
        this.loading = true
        collectDetail(code).then(response => {
          this.form = response.data,
          this.tableData = this.form.collectItemList;
          this.loading = false;
          let warehouseInfo = this.warehouseData.find(i => i.code === this.form.warehouseCode);
          this.form.warehouseName = warehouseInfo ? warehouseInfo.name : '';
          let typeInfo = this.typeList.find(i => i.code === this.form.type);
          this.form.typeName = typeInfo ? typeInfo.name : '';
          this.$message({ message: response.msg, type: 'success' })
        })
      },
      // 取消
      funcCancel() {
        this.$emit('fatherCancelMethod', 'print')
      },
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 175px;
    float: right;
    font-size: 16px;
    font-weight: bolder;
  }
</style>

<style lang="scss">
  #printTest{
    font-size: 5px;
  }

  .tittle{
    display: flex;
    justify-content: center;
    align-items: center;

    .tittle-content{
      width: 33%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .middleBottom{
    width:100%;
    min-height:90px;
    border:1px solid #000000;
    margin: 0 auto;
    display: flex;
    .middleBottom-left{
      width: 16.7%;
      color: #000000;
      border-right:1px solid #000000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .middleBottom-right{
      width: 95%;
      .middleBottom-right-top{
        display: flex;
        justify-content: center;
        align-items: center;
        height:30px;
        border-bottom: 1px solid #000000;
        .middleBottom-right-top-content{
          height:100%;
          width:15%;
          border-right:1px solid #000000;
          text-align:center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .middleBottom-right-middle{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #000000;
        height:30px;
        .middleBottom-right-middle-content{
          height:100%;
          width:15%;
          border-right:1px solid #000000;
          text-align:center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .middleBottom-right-bottom{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #000000;
        height:30px;
        .middleBottom-right-bottom-content{
          height:100%;
          width:15%;
          border-right:1px solid #000000;
          text-align:center;
          display: flex;
          align-items: center;
          justify-content: center;
        }

      }
    }
  }
</style>
